import { Flex, Typography } from "antd";
import { formatNumberToWan } from "../Common/commonData";
import styles from "./PPXinWenCard.module.css";
import { useUser } from "@/hook/useUser/useUser";
import ProxyImage from "../Common/ProxyImage/ProxyImage";

const { Text, Title } = Typography;

export function PPXinWenCard({ item = {}, style = {} }) {
  const { openInNewWindow, listDisplay } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  const isImageEnabled = listDisplay === 0 ? true : false;

  return (
    <Flex
      style={{
        backgroundColor: "white",
        boxShadow:
          "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
        borderRadius: 8,
        padding: 12,
        ...style,
      }}>
      <Flex gap={12} style={{ width: "100%" }}>
        {/* 图片部分 */}
        {isImageEnabled && (
          <a href={item.url} target={target} style={{ flexShrink: 0 }}>
            <ProxyImage
              originalUrl={item?.extra_content?.photo_url || null}
              style={{
                width: "185.89px",
                height: "108.89px",
                borderRadius: 4,
              }}
              alt="新闻图片"
            />
          </a>
        )}

        {/* 内容部分 */}
        <Flex justify="space-between" vertical style={{ flex: 1, minWidth: 0 }}>
          {/* 标题 */}
          <a
            href={item.url}
            className={styles["title-link"]}
            target={target}
            style={{ textDecoration: "none" }}>
            <Title
              level={5}
              ellipsis={{ rows: 2 }}
              className={styles.title}
              style={{
                margin: 0,
                fontSize: "clamp(14px, 4vw, 16px)", // 响应式字体大小
              }}>
              {item.title}
            </Title>
          </a>

          {/* 元信息 */}
          <Flex
            justify="space-between"
            align="flex-end"
            style={{ marginTop: 8 }}
            wrap="wrap"
            gap={8}>
            {/* 日期和互动数据 */}
            <Flex gap={8} style={{ color: "#666", fontSize: 12 }}>
              <Text type="secondary">{item.extra_content.created_at}</Text>
              <Text type="secondary">·</Text>
              <Text type="secondary">
                {formatNumberToWan(item.extra_content.likes)}点赞
              </Text>
              <Text type="secondary">·</Text>
              <Text type="secondary">
                {formatNumberToWan(item.extra_content.comment_count)}评论
              </Text>
            </Flex>

            {/* 关键词标签 */}
            <Flex gap={8} wrap="wrap" style={{ maxWidth: "100%" }}>
              {item.extra_content.keywords?.map((k, i) => (
                <a
                  key={i + "keywords"}
                  href={k.url}
                  target={target}
                  rel="noopener noreferrer"
                  style={{
                    color: "#1677ff",
                    fontSize: 12,
                    textDecoration: "none",
                    whiteSpace: "nowrap",
                  }}>
                  #{k.name}
                </a>
              ))}
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}
